<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        .back-link {
            display: block;
            margin-top: 20px;
            text-align: center;
            color: #1890ff;
            text-decoration: none;
        }
        
        .back-link:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-header">
            <h1>用户注册</h1>
            <p>创建您的新账号</p>
        </div>
        <form class="login-form" id="registerForm">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" placeholder="请输入用户名" required>
            </div>
            <div class="form-group">
                <label for="email">邮箱地址</label>
                <input type="email" id="email" name="email" placeholder="请输入邮箱地址" required>
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" placeholder="请输入密码" required>
            </div>
            <div class="form-group">
                <label for="confirmPassword">确认密码</label>
                <input type="password" id="confirmPassword" name="confirmPassword" placeholder="请再次输入密码" required>
            </div>
            <button type="submit" class="login-button">注册</button>
        </form>
        <a href="index.html" class="back-link">已有账号？返回登录</a>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const registerForm = document.getElementById('registerForm');
            
            registerForm.addEventListener('submit', function(event) {
                event.preventDefault();
                
                const username = document.getElementById('username').value.trim();
                const email = document.getElementById('email').value.trim();
                const password = document.getElementById('password').value.trim();
                const confirmPassword = document.getElementById('confirmPassword').value.trim();
                
                // 简单验证
                if (username === '') {
                    alert('请输入用户名');
                    return;
                }
                
                if (email === '') {
                    alert('请输入邮箱地址');
                    return;
                }
                
                // 验证邮箱格式
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(email)) {
                    alert('请输入有效的邮箱地址');
                    return;
                }
                
                if (password === '') {
                    alert('请输入密码');
                    return;
                }
                
                if (password.length < 6) {
                    alert('密码长度不能少于6个字符');
                    return;
                }
                
                if (password !== confirmPassword) {
                    alert('两次输入的密码不一致');
                    return;
                }
                
                // 模拟注册成功
                alert('注册成功！\n用户名: ' + username + '\n邮箱: ' + email);
                
                // 清空表单
                registerForm.reset();
                
                // 在实际应用中，这里会发送请求到服务器进行注册
                // 这里只是静态演示，所以直接显示成功消息
            });
        });
    </script>
</body>
</html>
